
import './index.less'
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Spin } from 'antd';
import { LoginApi } from '@/api/login';
import { setToken } from '@/untils/auth';



function Login() {
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false);

    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
        setLoading(true);
        let params = {
            username: values.username,
            password: values.password,
        }
        LoginApi(params).then((response) => {
            setLoading(false);
            if (response.code == 200) {
                // 请求接口存储tokencookie跳转
                setToken(response.token || '')
                navigate('/index')
            }
        }).catch(error => {
            console.log(error)
            setLoading(false);
        })

    };
    return (<>
        <div id='login_container'>
            <Spin spinning={loading} tip="登录进行中..." size='large' style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
            }} >
                <div className='login_main'>
                    <div className='login_left'>
                        <div className='left_content'>
                            <div className='left_logo'></div>
                            <div className='left_title'>Vite + React + Ts</div>
                        </div>
                    </div>
                    <div className='login_right'>
                        <div className='right_form'>
                            <Form
                                name="normal_login"
                                className="login-form"
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                            >
                                <Form.Item
                                    name="username"
                                    rules={[{ required: true, message: '请输入用户名!' }]}
                                >
                                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                                </Form.Item>
                                <Form.Item
                                    name="password"
                                    rules={[{ required: true, message: '请输入密码!' }]}
                                >
                                    <Input.Password
                                        prefix={<LockOutlined className="site-form-item-icon" />}
                                        type="password"
                                        placeholder="密码"
                                    />
                                </Form.Item>
                                <Form.Item>
                                    <div className='form_items'>
                                        <Form.Item name="remember" valuePropName="checked" noStyle>
                                            <Checkbox>记住密码</Checkbox>
                                        </Form.Item>

                                        <a className="login-form-forgot" href="">
                                            忘记密码
                                        </a>
                                    </div>
                                </Form.Item>

                                <Form.Item>
                                    <Button type="primary" htmlType="submit" className="login-form-button">
                                        登录
                                    </Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </div>
            </Spin>
        </div>
    </>);
}

export default Login;